<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/list.css" />
		<script type="text/javascript" src="../js/phone.js"></script>
		<style type="text/css">
			body {
				background: #FFF;
			}

			.mui-pull-bottom-pocket {
				visibility: visible!important;
				padding: 0.2rem 0rem;
			}

			.mui-pull-bottom-pocket .mui-pull-caption {
				text-align: center;
				color: #eee;
				font-size: 12px;
			}

			.mui-pull-loading {
				display: none!important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav ws-info-title">
			<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">搜索</h1>
		</header>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">

				</ul>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.js"></script>
	<script>
		var $$ = jQuery.noConflict();
		var CPACTH = 'http://wow.angwei.net';
		var listLegth = 6;
		var listNav = {
			'id': '',
			'keyWord': '娱乐',
			'pageCount': 2,
			'page': 1
		};
		/*(function($) {
			//阻尼系数
			var deceleration = mui.os.ios ? 0.001 : 0.009;
			$('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration: deceleration
			});
		})(mui);*/
		mui.plusReady(function() {
			var value = plus.webview.currentWebview().keyWord;
			listNav.keyWord = value;
			//				pullupRefresh();
			//				mui('#wsInfoCont').scroll({
			//					bounce: false,
			//					indicators: true, //是否显示滚动条
			//				});

		});
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					//style: 'circle',
					//callback: pulldownRefresh
				},
				up: {
					auto: true,
					show: true, //显示底部上拉加载提示信息，可选；
					contentrefresh: '正在加载...', //上拉进行中提示信息
					contentnomore: '没有更多数据了', //上拉无更多信息时提示信息
					callback: pullupRefresh
				}
			}
		});

		//处理点击事件，需要打开原生浏览器
		/*mui('body').on('tap', 'a', function(e) {
			var href = this.getAttribute('href');
			if(href) {
				if(window.plus) {
					plus.runtime.openURL(href);
				} else {
					location.href = href;
				}
			}
		});*/
		//时间戳转换成时间格式方法
		var datetime = function(time) {
			var date = new Date(parseInt(time));
			var year = date.getFullYear();
			var mon = date.getMonth() + 1;
			var day = date.getDate();
			var hours = date.getHours();
			var minu = date.getMinutes();
			var sec = date.getSeconds();
			return mon + '-' + day + ' ' + hours + ':' + minu;
		};

		function pullupRefresh() {
			mui('#pullrefresh').pullRefresh().endPullupToRefresh(listNav.page > listNav.pageCount); //参数为true代表没有更多数据了。
			var table = document.body.querySelector('.mui-table-view');
			var li;
			//	console.log(JSON.stringify(listNav.keyWord));
			mui.ajax(CPACTH + '/m/article/getListArticle.json?categoryId=' + listNav.id + '&key=' + listNav.keyWord + '&pageSize=' + listLegth + '&page=' + listNav.page, {
				data: '',
				dataType: 'json', //服务器返回json格式数据
				type: 'get', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				headers: {
					'Content-Type': 'application/json'
				},
				success: function(data) {
					//服务器返回响应，根据响应结果，分析是否登录成功；
					var dataJson = data;
					var datas = dataJson.data;
					console.log(JSON.stringify(datas));
					if(dataJson.metaInfo.code == 0) {
						if(datas.pageResult.list.length < 1) {
							$$(".noAll").show();
							return false;
						}
						listNav.page = datas.pageResult.page + 1;
						listNav.pageCount = datas.pageResult.pageCount;
						var listBox = datas.pageResult.list;
						for(var i = 0; i < listBox.length; i++) {
							li = document.createElement('li');
							var tuiJ = '';
							if(listBox[i].recommend == 1) {
								tuiJ = "<span class='ws-hot'>推荐</span>";
							}

							if(listBox[i].kind == 1) {
								li.className = 'mui-table-view-cell mui-media ws-leftImg';
								li.innerHTML = "<a class='mui-navigate-right' href='ws-info.html' data-wid='" + listBox[i].linkurl + "'><div class='mui-media-body'><h3>" + listBox[i].title + "</h3><div>" + tuiJ + "<span class='ws-user'>" + listBox[i].author + "</span><span class='ws-ping'>" + listBox[i].hits + "查看</span> <span class='ws-time'>" + datetime(listBox[i].created) + "</span></div></div></a>";
							} else if(listBox[i].kind == 2) {
								li.className = 'mui-table-view-cell mui-media';
								li.innerHTML = "<a class='mui-navigate-right' href='ws-info.html' data-wid='" + listBox[i].linkurl + "'><div class='mui-media-body'><h3>" + listBox[i].title + "</h3><div>" + tuiJ + "<span class='ws-user'>" + listBox[i].author + "</span> <span class='ws-ping'>" + listBox[i].hits + "查看</span> <span class='ws-time'>" + datetime(listBox[i].created) + "</span> </div> </div> <img class='mui-media-object mui-pull-left' src='" + listBox[i].url + "'></a>";
							} else if(listBox[i].kind == 3) {
								li.className = 'mui-table-view-cell mui-media ws-ggList';
								li.innerHTML = "<a class='mui-navigate-right' href='ws-info.html' data-wid='" + listBox[i].linkurl + "'><div class='mui-media-body'><h3>" + listBox[i].title + "</h3><div class='ws-ggImg'> <img src='" + listBox[i].imgs[0] + "' alt='' /><img src='" + listBox[i].imgs[1] + "' alt='' /><img src='" + listBox[i].imgs[2] + "' alt='' /></div><div>" + tuiJ + "<span class='ws-user'>" + listBox[i].author + "</span> <span class='ws-ping'>" + listBox[i].hits + "查看</span> <span class='ws-time'>" + datetime(listBox[i].created) + "</span> </div> </div></a>";
							}
							table.appendChild(li);
						}

					} else {
						mui.toast('网络错误，请重试！', {
							duration: 'long',
							type: 'div'
						})
					}
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
				}
			});
		}
		//主列表点击事件
		mui('.mui-scroll-wrapper').on('tap', 'a', function() {
			var href = this.getAttribute('href');

			//非plus环境，直接走href跳转
			if(!mui.os.plus) {
				location.href = href;
				return;
			}

			var id = this.getAttribute("data-wid");
			if(!id) {
				id = href;
			}

			if(href && ~href.indexOf('.html')) {
				//打开窗口的相关参数
				var options = {
					styles: {
						popGesture: "close"
					},
					extras: {
						id: id
					}
				};
				//如下场景不适用下拉回弹：
				//1、单webview下拉刷新；2、底部有fixed定位的div的页面
				if(!~id.indexOf('pullrefresh.html') && !~href.indexOf("examples/tabbar.html") && !~href.indexOf("list-to-detail/listview.html")) {
					options.styles.bounce = "vertical";
				}
				//图标页面需要启动硬件加速
				if(~id.indexOf('icons.html') || ~id.indexOf("echarts.html")) {
					options.styles.hardwareAccelerated = true;
				}
				if(~id.indexOf('im-chat.html')) {
					options.extras.acceleration = "none";
				}

				var titleType = this.getAttribute("data-title-type");
				if(titleType && titleType.indexOf("native") > -1) { //原生导航
					options.styles.titleNView = {
						autoBackButton: true,
						backgroundColor: '#f7f7f7',
						titleText: this.innerHTML.trim(),
						splitLine: {
							color: '#cccccc'
						}
					};

					options.show = {
						event: 'loaded'
					}
					//有原生标题的情况下，就不需要waiting框了
					options.waiting = {
						autoShow: false
					}

					//透明渐变导航,增加类型设置
					if(titleType == "transparent_native") {
						options.styles.titleNView.type = "transparent";
					}
				} else {
					//非原生导航，需要设置顶部状态栏占位
					options.styles.statusbar = {
						background: "#f7f7f7"
					}
				}
				//打开新窗口
				mui.openWindow(href, id, options);
			}
		});
	</script>
	</body>

</html>
